<template>
  <div>
    <snackbar style-color="#4A4A4A" back-color="#ffffff" status-color="#ffffff" :fixed="true" />
    <div class="box-option">
      <span @click="selectList(0)" :class="{'click':current===0}">全部</span>
      <span @click="selectList(1)" :class="{'click':current===1}">自有车辆</span>
      <span @click="selectList(2)" :class="{'click':current===2}">加盟车辆</span>
    </div>
    <div id="main">
      <ul v-for="(item,i) in showList" :key="item.i">
        <li>
          <div class="box-plate">
            <div class="plate"><span class="span-plate">{{item.plate}}</span><span
                style="color:#F0AE31;font-size: 15px;">{{item.ownership}}</span></div>
            <span style="display: flex;align-items: center;font-size: 15px;color:#333333 ;">详情<img
                src="../../assets/image/icon_right.png"></span>
          </div>
          <div class="box-type">
            <span class="alignRight">车型:</span>
            <span class="catcontent">{{item.type}}</span>
          </div>
          <div class="box-info">
            <span class="alignRight">创建日期:</span>
            <span class="catcontent">{{item.creatdate}}</span>
            <span style="color: #B4B4B4; margin:0 20px 0 13px;">工作量：<span
                style="color: #000000;">{{item.workload}}</span>车次</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        current: 0,
        list: [{
          plate: '桂A2333',
          ownership: '自有',
          type: '东风卡车',
          creatdate: '2021-5-31',
          workload: '1000'
        }, {
          plate: '桂B8888',
          ownership: '自有',
          type: '东风柳汽',
          creatdate: '2020-6-31',
          workload: '600'
        }],
        list2: [{
            plate: '桂B7788',
            ownership: '加盟',
            type: '东风卡车',
            creatdate: '2020-10-31',
            workload: '6000'
          },
          {
            plate: '桂B6666',
            ownership: '加盟',
            type: '五菱宏光',
            creatdate: '2021-10-31',
            workload: '900'
          }
        ],
        showList: []
      }
    },
    created() {
      this.showList = this.list.concat(this.list2)
    },

    methods: {
      selectList(n) {
        if (n == 0) {
          this.showList = this.list.concat(this.list2)
          this.current = 0
        } else if (n == 1) {
          this.showList = this.list
          this.current = 1
        } else if (n == 2) {
          this.showList = this.list2
          this.current = 2
        }
      }
    }
  }
</script>

<style scoped lang="less">
  .box-option {
    width: 100%;
    height: 10.667vw;
    background-color: #FFFFFF;
    border-bottom: 0.267vw solid #EAEAEA;

    span {
      font-size: 13px;
      line-height: 10.667vw;
      display: inline-block;
      height: 100%;
      width: 20.000vw;
      text-align: center;
      position: relative;
    }

    .click {
      color: #16BCC2;
    }

    .click::after {
      content: ' ';
      display: block;
      width: 11.467vw;
      height: 0.800vw;
      background-color: #16BCC2;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  #main {
    width: 100%;

    li {
      border-radius: 1.600vw;
      background-color: #FFFFFF;
      margin: 4.267vw auto 0 auto;
      width: 92.000vw;
      box-sizing: border-box;
      padding: 2.667vw 5.333vw;

      .box-plate,
      .box-type,
      .box-info {
        height: 11.467vw;
                width:85.667vw;
        display: flex;
        align-items: center;
      }
      .box-info{
        display: flex;
        justify-content: space-between;
        font-size: 14px;
       width: 88.000vw;
      }

      .box-plate .span-plate {
        font-size: 13px;
        border-radius: 1.600vw;
        display: inline-block;
        width: 26.667vw;
        height: 6.933vw;
        text-align: center;
        line-height: 6.933vw;
        background-color: #F5A623;
        color: #FFFFFF;
      }

      .box-plate {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .plate {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 40.000vw;
        }

        img {
          height: 3.200vw;
          width: 3.200vw;
        }
      }

      .box-type {
        display: flex;
      }

      .alignRight {
        width: 60px;
        text-align: right;
        display: inline-block;
        color: #B4B4B4;
        font-size: 14px;
        margin-right: 5.333vw;
      }

      .catcontent {
        width: 77px;
        display: inline-block;
        font-size: 15px;
        color: #333333;
      }
    }
  }
</style>
